import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
// 引入拆分出去的mutations文件
import mutations from './mutation'
import actions from './actions'
// 使用中间件
Vue.use(Vuex)

const moduleMen = {
  // 命名空间，为了显示区别，男生不加，加给女生的模块
  // namespaced: true,
  state: {
    name: 'Tom',
    age: 18
  },
  // getters、mutations、actions会注册在全局的实例上
  getters: {
    menNextAge(state) {
      return state.age + 1
    }
  }
}
const moduleWomen = {
  // 加上命名空间后，getters、mutations、actions会注册在自己的局部，不加命名空间就会注册在全局
  namespaced: true,
  state: {
    name: 'Jane',
    age: 16
  },
  getters: {
    womenNextAge(state) {
      return state.age + 1
    }
  }
}

// 实例化一个仓库
const store = new Vuex.Store({
  // 五个核心中最基础的一个，作用是初始化数据，类似组件中的data
  // SSOT：Single source of truth，单一数据源
  state: {
    // 今年的年龄
    age: 18,
    // 购物车数量
    cartNum: 0,
    list: [],
    // 账户余额
    money: 0,
    // 账号积分
    point: 0
  },
  // 类似计算属性，对state中的源数据加工得出新的数据
  // 和计算属性不同的地方：名字不同，需要传state这个参数。依赖缓存仍然存在，数据变化时会自动更新
  getters: {
    nextAge(state) {
      return state.age + 1
    }
  },
  mutations: mutations,
  // 和mutation的共同点是修改数据；
  // 不同点：actions是的异步的修改，不是直接修改，是通过mutation修改，commit(mutation)、dispatch(action)
  actions: actions,
  // 分模块，每个模块中有包含自己的state、getters、mutations、actions
  modules: {
    men:moduleMen,
    women:moduleWomen,
  }
})


export default store
